<!--
 * @Descripttion: 指定对接项目
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-04-13 10:28:50
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-23 17:47:20
-->

<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="`指定对接项目`"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="searchBox searchInputWidth">
              <el-form :inline="true" :model="filterField" ref="accountForm">
                <el-col :lg="8" :xl="6">
                  <el-form-item label="项目名称" class="row-padding-bottom">
                    <el-input
                      placeholder="请输入"
                      clearable
                      v-model="filterField.projectName"
                    />
                  </el-form-item>
                </el-col>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchTable"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <div class="spacing"></div>
            <!-- 表格 -->
            <div
              ref="tableBox"
              :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
            >
              <el-table
                ref="tableBox1"
                :max-height="tableHeight"
                :data="tableData"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                v-loading="loading"
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column
                  align="center"
                  prop="areaName"
                  label="区域"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column label="项目名称" width="230">
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.projectName"
                      :columnName="'projectName'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column label="施工方" width="230">
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.pbName"
                      :columnName="'pbName'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="uscc"
                  label="施工方统一信用代码"
                  :formatter="formatTd"
                ></el-table-column>
                <div slot="empty" v-show="isShow">
                  <emptyTable emptyText="暂无相关信息"></emptyTable>
                </div>
              </el-table>
              <Pagination
                ref="pagination"
                @getList="getTableList"
                :requestUrl="requestUrl"
                :filterField="filterField"
                :pageSize="pageSize"
                :pageSizes="pageSizes"
              ></Pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'designatedItem',
  mixins: [scrollTable],
  data() {
    return {
      projectInfo: {},
      requestUrl: '/api-m/inputUserAuthData/base/v1/page', //表格请求路径
      filterField: {
        projectName: '',
        authId: '',
      },
      tableData: [],
      loading: false,
      isShow: false,
      type: '',
    }
  },
  created() {
    this.filterField.authId = this.$route.query.id
    this.type = this.$route.query.type
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    goBack() {
      if (this.type == 'zs') {
        this.$router.push('/home/interfacePlatform/equipmentAppid')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppid',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/interfacePlatform/equipmentAppidCs')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 194px;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidth {
  width: 126px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detailInfo {
  padding: 18px 0 5px 0;
}

.detailInfoItem {
  margin-top: 28px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag-item {
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 20px;
  line-height: 18px;
  width: 60px;
  margin-left: 12px;
}
@import '../../../static/css/filterArea.less';
</style>
